<script setup>
import { showDialog, showFailToast } from 'vant';
import { ref, watch } from 'vue';
import { userFeedback } from '@/api/User';
import { useRouter } from 'vue-router';
const router = useRouter();

// 反馈文本
const feedbackTextArea = ref('');
// 字数统计
const feedbackTextCount = ref(0);

// 封装的提交反馈函数
const apiUserFeedback = async (content) => {
    const { code } = await userFeedback({
        content
    })
    return code;
}

// 提交反馈
const submitFeedback = async () => {
    if (feedbackTextArea.value.length > 800) {
        showFailToast('反馈内容过长,请限制在800字以内')
        return
    } else if (feedbackTextArea.value.length >= 100) {
        if (await apiUserFeedback(feedbackTextArea.value) === 1) {
            showDialog({
                title: '感谢信',
                message: '首先，请允许我代表我们的团队向您表达\n最诚挚的问候。\n我们深知，您的宝贵反馈对于我们不断提升服务质量具有重要意义。我们珍视每一份来自客户的声音，正是这些反馈构成了我们持续进步的动力。我们已经接收到了您的建议。并且我们承诺对每一条反馈给予高度关注，并采取具体措施加以实施。\n为了确保这些建议得到有效处理，我们将建立一个专门的反馈跟踪系统，定期更新进展，并向您反馈采纳情况。我们致力于将您的意见转化为实际改进，以增强我们服务的质量和客户满意度。在此，我们衷心感谢您的支持与信任。我们期待着有机会与您进一步沟通，探讨如何将这些反馈转化为具体的合作项目。\n我们相信，通过我们的共同努力，未来将为您带来更加卓越的体验。'
            }).then(() => {
                feedbackTextArea.value = '';
            })
        }


    } else if (feedbackTextArea.value.length === 0) {
        showFailToast('请填写反馈内容')
    } else {
        if (await apiUserFeedback(feedbackTextArea.value) === 1) {
            showDialog({
                title: '感谢信',
                message: '感谢您对我们的支持！我们将认真对待您的建议，并尽快给您回复。'
            }).then(() => { feedbackTextArea.value = ''; })
        }
    }

}

// watch textarea value
watch(feedbackTextArea, (newValue) => {
    feedbackTextCount.value = newValue.length;
})

</script>

<template>
    <div>
        <van-nav-bar title="意见反馈" left-text="返回" left-arrow @click="router.go(-1)" />
        <div class="feedback-view">
            <div class="feedback-view-title">
                <van-icon name="comment-circle-o" color="#0a91da" size="6vw" />
                <span>反馈意见</span>
            </div>
            <div class="feedback-view-textarea">
                <textarea v-model="feedbackTextArea" placeholder="请输入您宝贵的意见或建议.(800字以内)"></textarea>
                <p>欢迎您为我们提出宝贵的意见和建议,您留下的任何信息都将用来改善我们的软件。</p>
                <span class="text-count">{{ feedbackTextCount }}/800</span>
            </div>
            <div class="feedback-view-btn">
                <van-button type="primary" size="large" @click="submitFeedback">提交</van-button>
            </div>
        </div>
    </div>

</template>

<style scoped lang="scss">
.feedback-view {
    padding: 7px 20px;
    display: flex;
    flex-direction: column;

    .feedback-view-title {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 16px;
        height: 40px;
    }

    .feedback-view-textarea {
        color: #999;
        position: relative;

        textarea {
            box-sizing: border-box;
            margin: 0;
            padding: 7px 10px;
            margin-top: 10px;
            margin-bottom: 3.33333vw;
            width: 100%;
            height: 66vw;
            resize: none;
            border: #bbb 1px solid;
            border-radius: 5px;
            background-color: transparent;

            &::placeholder {
                font-size: 14px;
                color: inherit;
            }
        }

        p {
            margin: 0 auto;
            text-align: center;
            width: 78.66667vw;
            font-size: 3.8vw;
        }

        span {
            position: absolute;
            bottom: 65px;
            right: 10px;
            font-size: 14px;
        }
    }

    .feedback-view-btn {
        button {
            margin-top: 150px;
        }
    }
}
</style>